<template>
<view class="wrap">
	<view class="top">
		<view class="con">
			<u--image
			:src="imgDomain+'/admin-api/infra/file/4/get/13bc11b8c23227954e646d153f44c42ed09ea0e005ae22709847b51f5623aaf9.png'"
			:showLoading="true" width="750rpx" height="400rpx" mode="widthFix"
			>
				<template v-slot:loading>
				   <u-loading-icon ></u-loading-icon>
				</template>
			</u--image>
			<view class="con_wrap">
				<view class="title">欢迎访问</view>
				<view class="text">国家企业信用信息公示系统（宁夏）</view>
			</view>
		</view>
	</view>
	
	<view class="content">
		<view class="line easyinputWrap" :style="regnoRule==3?'border-color: red;':''">
			<uni-easyinput
				trim="all"
				placeholder="* 统一社会信用代码/注册号" 
				:clearable="false"
				:errorMessage="regnoRule==3?true:false"
				v-model="regno"
				@input="regnoInput()"
				@blur="regnoBlur()"
			></uni-easyinput>
		</view>
		<view class="line easyinputWrap">
			<uni-easyinput v-model="lerep" trim="all" placeholder="* 法定代表人（负责人）姓名" :clearable="false"></uni-easyinput>
		</view>
		<view class="line easyinputWrap" :style="idCardA.idCardRule==3?'border-color: red;':''">
			<uni-easyinput
				trim="all" type="idcard" 
				placeholder="* 法定代表人（负责人）身份证号码" 
				:clearable="false"
				maxlength="18"
				:errorMessage="idCardA.idCardRule==3?true:false"
				v-model="idCardA.idCard"
				@input="idCardInput('idCardA')"
				@blur="idCardBlur('idCardA')"
			></uni-easyinput>
		</view>
		<view class="line easyinputWrap">
			<uni-easyinput v-model="linkman" trim="all" placeholder="* 联络员姓名" :clearable="false"></uni-easyinput>
		</view>
		<view class="line easyinputWrap" :style="idCard.idCardRule==3?'border-color: red;':''">
			<uni-easyinput
				trim="all" type="idcard"  
				placeholder="* 联络员身份证号码" 
				:clearable="false"
				maxlength="18"
				:errorMessage="idCard.idCardRule==3?true:false"
				v-model="idCard.idCard"
				@input="idCardInput('idCard')"
				@blur="idCardBlur('idCard')"
			></uni-easyinput>
		</view>
		<view class="line easyinputWrap" :style="phoneRule==3?'border-color: red;':''">
			<text class="colorTit">+86</text>
			<uni-easyinput
				trim="all" type="number" 
				placeholder="* 联络员手机号码" 
				:clearable="false"
				maxlength="11"
				:errorMessage="phoneRule==3?true:false"
				v-model="phone"
				@input="phoneInput"
				@blur="phoneBlur"
			></uni-easyinput>
		</view>
		
		<view class="verifyCodeWrap">
			<view class="line easyinputWrap">
				<uni-easyinput v-model="smscode" trim="all" placeholder="* 请输入验证码" :clearable="false"></uni-easyinput>
			</view>
			<view class="verifyCode" @click="getCode()">{{codeGetSta?'获取验证码':num+'s后重新获取'}}</view>
		</view>
		
		<button class="btn" @click="registerBtn()">注册</button>
		<view class="cut">
			<view class="min" @click="goPage('/pages/login/change')">联络员变更</view>
			<view class="min" @click="goPage('/pages/login/login')">联络员登录</view>
		</view>
	</view>
	
	
	<uni-popup ref="message" type="message">
		<uni-popup-message :type="msgType" :message="messageText" :duration="2000" style="text-align: center;"></uni-popup-message>
	</uni-popup>
	
</view>
</template>

<script>
	export default {
		data() { 
			return {
				imgDomain: this.$config.imgDomain,
				num: 59,
				codeGetSta: true,
				timer: null,

				//手机号
				phone: '',
				phoneInputSta: false,
				phoneRule: 1, //2：通过
				//--负责人身份证
				idCardA: {
					idCard: '',
					idCardInputSta: false,
					idCardRule: 1, //2：通过
				},
				//--联络员身份证
				idCard: {
					idCard: '',
					idCardInputSta: false,
					idCardRule: 1, //2：通过
				},
				//注册号
				regno: '',
				regnoInputSta: false,
				regnoRule: 1, //2：通过
				
				lerep: '',
				linkman: '',
				smscode: '',
				
				msgType: 'error',
				messageText: '',
			}
		},
		onUnload() {
			// clearInterval(this.timer);
		},
		methods: {
			messageToggle(con) {
				this.messageText = con
				this.$refs.message.open()
			},
			registerBtn(){
				let _this = this;
				let sta = this.verifyFun();
				let data = {
					regno: this.regno,
					lerep: this.lerep,
					legcerno: this.idCardA.idCard,
					linkman: this.linkman,
					ideneffeno: this.idCard.idCard,
					phone: this.phone,
					smscode: this.smscode,
				}
				if(sta){
					this.$http.sendRequest({
						url: '/annual/report/entuser/register',
						method: 'POST',
						data: data,
					})
					.then(res=>{
						if(res.code === 0){
							this.$util.requestToast({title: '注册成功！'});
							uni.showModal({
								title: '提示',
								content: '是否去登录？',
								showCancel: false,
								success() {
									_this.restFun();
									uni.navigateTo({
										url: '/pages/login/login'
									})
								}
							})
						}
					})
					.catch(err=>{})
				}
			},
			verifyFun(){
				if(this.regnoRule != 2){
					this.regnoInputSta = true;
					this.regnoRule = 3;
					this.messageToggle('注册号有误');
					return false;
				}
				if(!this.lerep){
					this.messageToggle('请输入法定代表人（负责人）姓名');
					return false;
				}
				if(this.idCardA.idCardRule != 2){
					this.idCardA.idCardInputSta = true;
					this.idCardA.idCardRule = 3;
					this.messageToggle('法定代表人（负责人）身份证号码有误');
					return false;
				}
				if(this.idCard.idCardRule != 2){
					this.idCard.idCardInputSta = true;
					this.idCard.idCardRule = 3;
					this.messageToggle('联络员身份证号码有误');
					return false;
				}
				if(!this.linkman){
					this.messageToggle('请输入联络员姓名');
					return false;
				}
				if(this.phoneRule != 2){
					this.phoneInputSta = true;
					this.phoneRule = 3;
					this.messageToggle('手机号有误');
					return false;
				}
				if(!this.smscode){
					this.messageToggle('请输入验证码');
					return false;
				}
				return true;
			},
			restFun(){
				// clearInterval(this.timer);
				this.num = 59;
				this.codeGetSta = true;
				this.timer = null;
				//手机号
				this.phone = '';
				this.phoneInputSta = false;
				this.phoneRule = 1; //2：通过
				//--负责人身份证
				this.idCardA = {
					idCard: '',
					idCardInputSta: false,
					idCardRule: 1, //2：通过
				};
				//--联络员身份证
				this.idCard = {
					idCard: '',
					idCardInputSta: false,
					idCardRule: 1, //2：通过
				};
				//注册号
				this.regno = '';
				this.regnoInputSta = false;
				this.regnoRule = 1; //2：通过
				
				this.lerep = '';
				this.linkman = '';
				this.smscode = '';
			},
			regnoBlur(){
				if(this.regnoInputSta){
					this.$http.sendRequest({
						url: '/annual/report/marpripinfo/check',
						data: {
							regno: this.regno
						}
					})
					.then(res=>{
						if(res.data){
							if(res.data.linkman || res.data.ideneffeno || res.data.phone){
								this.regnoRule = 3;
								this.messageToggle('该社会信用代码/注册号已注册!');
							}else{
								this.regnoRule = 2;
							}
						}else{
							this.regnoRule = 3;
							this.messageToggle('社会信用代码/注册号有误!');
						}
						
					})
					.catch(err=>{
						this.regnoRule = 3;
					})
				}
			},
			regnoInput(){
				this.regnoInputSta = true;
			},
			idCardBlur(dataName) {
				// 18位身份证号正则表达式
				let rule = /^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[xX\d]$/;
				let sta = true;
				if(rule.test(this[dataName].idCard)){
					sta = true;
				}else{
					sta = false;
				}
				if(this[dataName].idCardInputSta){
					if(!sta){
						this[dataName].idCardRule = 3;
						this.messageToggle('身份证号格式有误！');
					}else{
						this[dataName].idCardRule = 2;
					}
				}
			},
			idCardInput(dataName){
				this[dataName].idCardInputSta = true;
			},
			phoneBlur(){
				let rule = /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
				let sta = true;
				if(rule.test(this.phone)){
					sta = true;
				}else{
					sta = false;
				}
				if(this.phoneInputSta){
					if(!sta){
						this.phoneRule = 3;
						this.messageToggle('手机号格式有误！');
					}else{
						this.phoneRule = 2;
					}
				}
			},
			phoneInput(){
				this.phoneInputSta = true;
			},
			getCode(){
				if(this.codeGetSta){
					if(this.regnoRule != 2){
						this.messageToggle('请填写正确的社会信用代码/注册号！');
						return;
					}
					if(this.phoneRule == 2){
						this.$http.sendRequest({
							url: '/annual/report/entuser/sent-sms-Code',
							data: {
								phone: this.phone,
								regno: this.regno,
								type: 'register'
							}
						})
						.then(res=>{
							this.num = 59;
							this.codeGetSta = false;
							this.timerFun();
						})
						.catch(err=>{})
					}else{
						this.messageToggle('请输入正确的手机号码！');
					}
				}
			},
			goPage(path){
				uni.navigateTo({
					url: path,
				})
			},
			timerFun(){
				let num = 59;
				clearInterval(this.timer);
				this.timer = setInterval(()=>{
					num--;
					if(num <= 0){
						clearInterval(this.timer);
						this.codeGetSta = true;
					}
					if(num < 10){
						this.num = '0'+num;
					}else{
						this.num = num;
					}
				},1000)
			}
		}
	}
</script>

<style lang="less">
.top{
	width: 100%;
	height: 400rpx;
	// background-color: #F2F2F2;
	position: relative;
	
	.con{
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		
		.u-image{
			position: absolute;
			left: 0;
			top: 0;
		}
		
		.con_wrap{
			width: 100%;
			height: 100%;
			position: relative;
			z-index: 2;
		}
		
		.title{
			font-size: 70rpx;
			font-weight: bold;
			color: #333;
			padding: 100rpx 50rpx 0;
		}
		.text{
			font-size: 42rpx;
			font-weight: bold;
			color: #333;
			padding: 30rpx 0 30rpx 50rpx;
		}
	}
}

.content{
	padding: 40rpx;
	padding-bottom: 100rpx;
	
	.line{
		border-bottom: 2rpx solid #E4E4E4;
		padding: 26rpx 10rpx;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
	}
	.verifyCodeWrap{
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		.line{
			width: calc(100% - 230rpx);
		}
		.verifyCode{
			width: 200rpx;
			text-align: center;
			white-space: nowrap;
			color: #5092E1;
		}
	}
	
	.btn{
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		background-color: #E4B673;
		color: #fff;
		border: 0;
		font-size: 30rpx;
		font-weight: bold;
		margin-top: 40rpx;
	}
	.cut{
		margin-top: 40rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #5092E1;
	}
}

.colorTit{
	color: #333;
	margin-left: 20rpx;
}

</style>


<style scoped>
.easyinputWrap>>>.uni-easyinput__content-input{
	height: auto !important;
	font-size: 32rpx !important;
}
.easyinputWrap>>>.is-input-border{
	border: 0 !important;
}
.easyinputWrap>>>.uni-easyinput__placeholder-class{
	font-size: 32rpx !important;
}
</style>